<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with ZhipuAI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #chat-container {
            display: flex;
        }
        #chat-box, #history-box {
            width: 400px;
            height: 500px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: auto;
            margin-right: 10px;
        }
        #user-input {
            width: 300px;
            padding: 5px;
        }
        #send-btn, #save-btn, #load-btn {
            padding: 5px 10px;
            margin-right: 5px;
        }
        .slider-container {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Chat with ZhipuAI</h1>
    <div class="slider-container">
        <label for="temperature">Temperature:</label>
        <input type="range" id="temperature" min="0" max="1" step="0.05" value="0.5">
        <span id="temperature-value">0.7</span>
    </div>
    <div id="chat-container">
        <div id="chat-box"></div>
        <div id="history-box"></div>
    </div>
    <input type="text" id="user-input" placeholder="输入你的问题...">
    <button id="send-btn">发送</button>
    <button id="save-btn">保存</button>
    <button id="load-btn">装载</button>

    <script>
        let messages = [];  // 存储对话上下文
        let currentDbPath = null;  // 当前数据库路径

        // 更新温度显示
        document.getElementById('temperature').addEventListener('input', (e) => {
            document.getElementById('temperature-value').textContent = e.target.value;
        });

        // 发送消息
        document.getElementById('send-btn').addEventListener('click', async () => {
            const userInput = document.getElementById('user-input').value;
            if (!userInput) return;

            // 显示用户输入
            document.getElementById('chat-box').innerHTML += `<p><strong>你:</strong> ${userInput}</p>`;
            document.getElementById('user-input').value = '';

            // 获取温度值
            const temperature = parseFloat(document.getElementById('temperature').value);

            // 发送请求到服务器
            const response = await fetch('/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ message: userInput, messages: messages, temperature: temperature }),
            });

            const data = await response.json();
            document.getElementById('chat-box').innerHTML += `<p><strong>AI:</strong> ${data.response}</p>`;
            messages = data.messages;  // 更新上下文
        });

        // 保存数据库
        document.getElementById('save-btn').addEventListener('click', async () => {
            const dbPath = prompt("请输入数据库文件路径（默认：chat_日期时间.db）:");
            const response = await fetch('/save_db', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ db_path: dbPath }),
            });
            const data = await response.json();
            alert(`数据库已保存到: ${data.db_path}`);
        });

        // 加载数据库
        document.getElementById('load-btn').addEventListener('click', async () => {
            const dbPath = prompt("请输入数据库文件路径:");
            const response = await fetch('/load_db', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ db_path: dbPath }),
            });
            const data = await response.json();
            if (data.status === "success") {
                // 显示历史记录
                const historyBox = document.getElementById('history-box');
                historyBox.innerHTML = '';
                data.history.forEach(([user, ai]) => {
                    historyBox.innerHTML += `<p><strong>你:</strong> ${user}</p>`;
                    historyBox.innerHTML += `<p><strong>AI:</strong> ${ai}</p>`;
                });
            } else {
                alert(data.message);
            }
        });
    </script>
</body>
</html>